<template>
  <div class="main">
    <el-container>
      <el-main>
        <h2 style="line-height: 20px;width:100%;text-align:left;margin-bottom:20px">报表</h2>
        <el-card style="line-height:50px">
          <el-radio v-model="radio" label="1">月度报表</el-radio>
          <el-radio v-model="radio" label="2">服装类别业绩报表</el-radio>
          <el-radio v-model="radio" label="3">年度报表</el-radio>
        </el-card>
        <div style="height:30px"></div>
        <!-- <el-select
          v-model="value"
          placeholder="请选择"
          style="float:left;line-height:50px;display:block"
        >
          <el-option label="月度报表" value="1" style="margin:0px"></el-option>
          <el-option label="服装类别业绩报表" value="2" style="margin:0px"></el-option>
        </el-select>-->

        <el-card>
          <div v-if="radio=='1'">
            <el-select
              v-model="month"
              placeholder="请选择月份"
              style="float:left;line-height:50px;display:inline-block"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="margin:0px"
              ></el-option>
            </el-select>
            <div style="float:right;line-height:40px">
              <el-radio v-model="radio1" label="line">线性图</el-radio>
              <el-radio v-model="radio1" label="bar">柱状图</el-radio>
            </div>
            <div style="clear:both"></div>
            <h1 style="line-height:90px">{{month}} 月度报表</h1>
            <div ref="myChart" :style="{width: '1000pwx', height: '350px'}"></div>
          </div>
          <div v-else-if="radio==2">
            <div ref="myChart2" :style="{width: '999pwx', height: '350px'}"></div>
            <!-- <div>我傻了</div> -->
          </div>
          <div v-else>
            <div style="float:right;line-height:40px">
              <el-radio v-model="radio1" label="line">线性图</el-radio>
              <el-radio v-model="radio1" label="bar">柱状图</el-radio>
            </div>
            <div style="clear:both"></div>
            <h1 style="line-height:90px">年度报表</h1>
            <div ref="myChart3" :style="{width: '1000pwx', height: '350px'}"></div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      radio1: "line",
      value: "",
      month: "",
      options: [
        {
          label: "Jan",
          value: "1"
        },
        {
          label: "Feb",
          value: "2"
        },
        {
          label: "Mar",
          value: "3"
        },
        {
          label: "Apr",
          value: "4"
        },
        {
          label: "May",
          value: "5"
        },
        {
          label: "Jun",
          value: "6"
        },
        {
          label: "Jul",
          value: "7"
        },
        {
          label: "Aug",
          value: "8"
        },
        {
          label: "Sept",
          value: "9"
        },
        {
          label: "Oct",
          value: "10"
        },
        {
          label: "Nov",
          value: "11"
        },
        {
          label: "Dec",
          value: "12"
        }
      ],
      xData: [],
      yData: [],
      arr: [],
      xData1: [
        "Mon",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sept",
        "Oct",
        "Nov",
        "Dec"
      ],
      yData1: []
    };
  },
  mounted() {
    this.count();
    this.draw();
    this.getData2();
    this.getData3();
  },
  beforeUpdate() {
    this.getData();
    this.draw();
    console.log("gengxinle");
  },
  methods: {
    count() {
      let res = [];
      for (let i = 1; i <= 31; i++) {
        res.push(i);
      }
      this.xData = res;
    },
    draw() {
      if (this.radio == 1) {
        //   console.log(this.radio == 1);
        setTimeout(() => {
          console.log("my");
          let myChart = this.$echarts.init(this.$refs.myChart);
          // 绘制图表
          let option = {
            tooltip: {
              trigger: "axis"
            },
            //   legend: {
            //     data: [name],
            //     bottom: "0%"
            //   },
            title: { text: "每日销量" },
            grid: {
              //调整图表上下左右位置
              top: "10%",
              left: "3%",
              right: "8%",
              bottom: "11%",
              containLabel: true
            },
            xAxis: {
              // type: "category",
              // boundaryGap: false,
              data: this.xData
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                name: "每日销量",
                type: this.radio1,
                stack: "总量",
                data: this.yData
              }
            ]
          };
          //防止越界，重绘canvas
          //   window.onresize = myChart.resize;
          // setTimeout(() => {
          //   myChart.setOption(option); //设置option
          // }, 200);
          setTimeout(() => {
            try {
              myChart.setOption(option, true);
            } catch (error) {}
          }, 500);
        }, 1000);
      } else if (this.radio == 2) {
        setTimeout(() => {
          if (this.radio == 2) {
            let myChart2 = this.$echarts.init(this.$refs.myChart2);
            // 绘制图表
            let option2 = {
              tooltip: {
                trigger: "item"
              },
              series: [
                {
                  name: "类型销量",
                  type: "pie",
                  radius: "70%",
                  roseType: "angle",
                  data: this.arr
                }
              ]
            };
            setTimeout(() => {
              try {
                myChart2.setOption(option2, true);
              } catch (error) {}
            }, 500);
          }
        }, 1000);
      } else {
        setTimeout(() => {
          console.log("3");
          let myChart3 = this.$echarts.init(this.$refs.myChart3);
          // 绘制图表
          let option3 = {
            tooltip: {
              trigger: "axis"
            },
            //   legend: {
            //     data: [name],
            //     bottom: "0%"
            //   },
            title: { text: "每月销量" },
            grid: {
              //调整图表上下左右位置
              top: "10%",
              left: "3%",
              right: "8%",
              bottom: "11%",
              containLabel: true
            },
            xAxis: {
              // type: "category",
              // boundaryGap: false,
              data: this.xData1
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                name: "每月销量",
                type: this.radio1,
                stack: "总量",
                data: this.yData1
              }
            ]
          };
          setTimeout(() => {
            try {
              myChart3.setOption(option3, true);
            } catch (error) {}
          }, 500);
        }, 1000);
      }
    },
    getData() {
      if (this.month) {
        this.$axios({
          url: "/Report/salemounth",
          method: "get",
          params: { yue: this.month }
        }).then(res => {
          console.log(res.data.data);
          this.yData = res.data.data;
        });
      }
    },
    getData2() {
      this.$axios({
        url: "/Report/amountclass",
        method: "get"
      }).then(res => {
        // console.log(Object.values(res.data));
        let name = Object.keys(res.data);
        let value = Object.values(res.data);
        this.arr = name.map((name, index) => ({
          name,
          value: value[index]
        }));
        // console.log(this.arr);
      });
    },
    getData3() {
      this.$axios({
        url: "/Report/saleyear",
        method: "get",
        params: { nian: "2021" }
      }).then(res => {
        // console.log("nian");
        // console.log(res.data.data);
        this.yData1 = res.data.data;
      });
    }
  }
};
</script>

<style>
h1 {
  text-align: center;

  font-size: 20px;
}
</style>